
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                    <p></p> 
<h2><a name="t0"></a><a id="_1"></a>一、开通认证服务</h2> 
<p>地址：<a href="https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/myProject/388421841222342858/97458334310914890?appId=5765880207854995971" rel="nofollow" target="_blank">AppGallery Connect (huawei.com)</a></p> 
<pre data-index="0" class="set-code-show prettyprint" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">步骤：
1 进入到项目设置页面中，并点击左侧菜单中的认证服务
2 选择需要开通的服务并开通

<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:0,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/8816c4404d8567d8ce55139f01616c1d.png" alt="image.png"><br> </p> 
<h2><a name="t1"></a><a id="_11"></a>二、端侧项目环境配置</h2> 
<p></p> 
<h6><a id="_13"></a>添加依赖</h6> 
<pre data-index="1" class="set-code-show prettyprint" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">entry目录下的oh-package.json5
// 添加：主要前2个依赖
"dependencies": {
    "@hw-agconnect/cloud": "^1.0.0",
    "@hw-agconnect/hmcore": "^1.0.0",
    "@hw-agconnect/auth-component": "^1.0.0", // 可选
    "long": "5.2.1"
  }
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:1,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p></p> 
<h6><a id="_25"></a>开通网络权限</h6> 
<pre data-index="2" class="set-code-show prettyprint" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">// 文件名：module.json5
// 路径：src/main/module.json5
  "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET" // 网络权限
      },
    ]

<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:2,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p></p> 
<h6><a id="agconnectservicesjson_37"></a>更新agconnect-services.json文件</h6> 
<pre data-index="3" class="set-code-show prettyprint" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">// AGC网站提示：下载最新的配置文件（如果您修改了项目、应用信息或者更改了某个开发服务设置，可能需要更新该文件）
为了确保项目不会出错，建立更新下该配置文件

<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:3,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p></p> 
<h2><a name="t2"></a><a id="__44"></a>三 认证<span class="edu-hl hl hl-1" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;extra&quot;:&quot;{\&quot;word\&quot;:\&quot;组件\&quot;}&quot;}" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;extra&quot;:&quot;{\&quot;word\&quot;:\&quot;组件\&quot;}&quot;}" data-tit="组件" data-pretit="组件">组件</span>界面示例</h2> 
<ol><li>新建Login.ets页面，并设置成为应用首页</li></ol> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/d10e89be578d5d1335fd823523aebe4f.png" alt="image.png"></p> 
<ol start="2"><li>Login.ets调用认证组件</li></ol> 
<pre data-index="4" class="prettyprint set-code-show" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">import { AuthMode, Login } from '@hw-agconnect/auth-component';
import router from '@ohos.router';


@Entry
@Component
struct MyLogin {
  @State message: string = 'Hello World';

  build() {
   Column(){
     Text("test")
     // auth-component 中的组件Login
     Login({
       modes:[AuthMode.PHONE_VERIFY_CODE] // 手机验证码登录
       ,
       onSuccess:()=&gt;{
         //登录成功后的回调
         router.pushUrl({url:'pages/Index'})
       }

     }){
       Button("登录").height(60).width("100%")
     }


   }.width("100%").height("100%")
  }
}
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:4,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/f120c64bfebea8b337397bf83243955c.png" alt="image.png"><br><img src="https://i-blog.csdnimg.cn/blog_migrate/0b1ebd6379049ec5fb4b3fc171fab110.png" alt="image.png"><br> </p> 
<h2><a name="t3"></a><a id="_84"></a>四、自定义登录组件</h2> 
<pre data-index="5" class="prettyprint set-code-show" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">// 参考链接：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-auth-harmonyos-arkts-login-phone-0000001631566338

import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';

@Entry
@Component
struct PageTest {
  @State verificationBtnStr:string= "验证码"
  phone:string = ""
  @State verifcationBtnStatus:boolean = true
  @State timer :number = 0
  @State countDown:number = 60
  // 云端获取
  getCloudQrCode(){
    cloud.auth().requestVerifyCode({
      action: VerifyCodeAction.REGISTER_LOGIN,
      lang: 'zh_CN',
      sendInterval: 60,
      verifyCodeType: {
        phoneNumber: this.phone,
        countryCode: '86',
        kind: "phone"
      }
    }).then(verifyCodeResult =&gt; {
      //验证码申请成功
      console.log(JSON.stringify(verifyCodeResult))
      AlertDialog.show({
        title: "提示",
        message: "获取验证码成功",
      })
    }).catch((error: Promise&lt;Result&gt;) =&gt; {
      AlertDialog.show({
        title: "提示",
        message: "获取验证码失败",
      })
      //验证码申请失败
    });

  }
  // 初始化参数：
  initData(){
    clearInterval(this.timer)
    this.verifcationBtnStatus = true
    this.verificationBtnStr  = "验证码"
    this.countDown  = 60
  }
  // 发送验证码
  getCode(){
    if(this.phone==''){
      AlertDialog.show({
        title: "提示",
        message: "请输入手机号码",

      })
      return;
    }
    this.verifcationBtnStatus = false

    this.getCloudQrCode()


    this.timer  = setInterval(()=&gt;{
      this.verificationBtnStr = `${this.countDown}s`
      if(this.countDown===0){
        this.initData()
        return;
      }

      this.countDown --

    },1000)
  }
  build() {
    Column({space:20}){
      TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
        .onChange((value)=&gt;{
          this.phone = value
        })
      Row(){
        TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
        Button(this.verificationBtnStr).width(120).onClick(()=&gt;{
          this.getCode()

        }).enabled(this.verifcationBtnStatus)

      }.width("100%").height(60)
      Button("登录").width("100%").height(40).padding({
        left:50,right:50
      }).backgroundColor("#ff08be4b")
    }.width("100%").height("100%").padding({left:10,right:10})
  }
}
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:5,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<ol><li>效果：</li></ol> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/1ae6b3bb439b6dc37210e8d30a4e9d54.png" alt="image.png"></p> 
<p></p> 
<h2><a name="t4"></a><a id="_186"></a>五、邮箱登录验证</h2> 
<pre data-index="6" class="prettyprint set-code-show" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
import router from '@ohos.router';

@Entry
@Component
struct PageTest {
  @State verificationBtnStr:string= "验证码"
  @State phone:string = ""
  @State verifcationBtnStatus:boolean = true
  @State timer :number = 0
  @State countDown:number = 60
  @State data:string = ""
  @State verifCode:string = ""
  // 注销
  loginOut(){
    cloud.auth().signOut().then(() =&gt; {
      //登出成功
      AlertDialog.show({
        title: "提示",
        message: "注销用户成功",


      })
    }).catch(() =&gt; {
      //登出失败
    });
  }
  //登录
   login(){
   
    // 注册
     this.data = this.verifCode

     cloud.auth().signIn({
       credentialInfo: {
         kind: 'email',
         email: this.phone,
         verifyCode: this.verifCode
       }
     }).then(user =&gt; {
       //登录成功
       router.replaceUrl({url:'pages/Index'})
     }).catch((error:Promise&lt;Result&gt;) =&gt; {
       //登录失败
       this.data= JSON.stringify(error)
       AlertDialog.show({
         title: "提示",
         message: JSON.stringify(error),

       })
     });

  }
  // 云端获取
  getCloudQrCode(){
    cloud.auth().requestVerifyCode({
      action: VerifyCodeAction.REGISTER_LOGIN,
      lang: 'zh_CN',
      sendInterval: 60,
      verifyCodeType: {
        email: this.phone,
        kind: "email",
      }
    }).then(verifyCodeResult =&gt; {
      //验证码申请成功
      console.log(JSON.stringify(verifyCodeResult))
      this.data = JSON.stringify(verifyCodeResult)
      AlertDialog.show({
        title: "提示",
        message: "获取验证码成功",
      })
    }).catch((error: Promise&lt;Result&gt;) =&gt; {
      AlertDialog.show({
        title: "提示",
        message: "获取验证码失败",
      })
      //验证码申请失败
    });

  }
  // 初始化参数：
  initData(){
    clearInterval(this.timer)
    this.verifcationBtnStatus = true
    this.verificationBtnStr  = "验证码"
    this.countDown  = 60
  }
  // 发送验证码
  getCode(){
    if(this.phone==''){
      AlertDialog.show({
        title: "提示",
        message: "请输入用户邮箱",

      })
      return;
    }
    this.verifcationBtnStatus = false

    this.getCloudQrCode()


    this.timer  = setInterval(()=&gt;{
      this.verificationBtnStr = `${this.countDown}s`
      if(this.countDown===0){
        this.initData()
        return;
      }

      this.countDown --

    },1000)
  }
  build() {
    Column({space:20}){
      TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
        .onChange((value)=&gt;{
          this.phone = value
        })
      Row(){
        TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
          .onChange((value)=&gt;{
            this.verifCode =value
          })
        Button(this.verificationBtnStr).width(120).onClick(()=&gt;{
          this.getCode()

        }).enabled(this.verifcationBtnStatus)

      }.width("100%").height(60)
      Button("登录").onClick( ()=&gt;{
        this.data = "1aaaaaa"
        this.login()

      }).width("100%").height(40).padding({
        left:50,right:50
      }).backgroundColor("#ff08be4b")

      Button("注销").onClick( ()=&gt;{
        this.data = "1aaaaaa"
        this.loginOut()

      }).width("100%").height(40).padding({
        left:50,right:50
      }).backgroundColor("#ff08be4b")


      Text(this.data).width("100%").height(200).backgroundColor(Color.Pink)
    }.width("100%").height("100%").padding({left:10,right:10})
  }
}
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li><li style="color: rgb(153, 153, 153);">114</li><li style="color: rgb(153, 153, 153);">115</li><li style="color: rgb(153, 153, 153);">116</li><li style="color: rgb(153, 153, 153);">117</li><li style="color: rgb(153, 153, 153);">118</li><li style="color: rgb(153, 153, 153);">119</li><li style="color: rgb(153, 153, 153);">120</li><li style="color: rgb(153, 153, 153);">121</li><li style="color: rgb(153, 153, 153);">122</li><li style="color: rgb(153, 153, 153);">123</li><li style="color: rgb(153, 153, 153);">124</li><li style="color: rgb(153, 153, 153);">125</li><li style="color: rgb(153, 153, 153);">126</li><li style="color: rgb(153, 153, 153);">127</li><li style="color: rgb(153, 153, 153);">128</li><li style="color: rgb(153, 153, 153);">129</li><li style="color: rgb(153, 153, 153);">130</li><li style="color: rgb(153, 153, 153);">131</li><li style="color: rgb(153, 153, 153);">132</li><li style="color: rgb(153, 153, 153);">133</li><li style="color: rgb(153, 153, 153);">134</li><li style="color: rgb(153, 153, 153);">135</li><li style="color: rgb(153, 153, 153);">136</li><li style="color: rgb(153, 153, 153);">137</li><li style="color: rgb(153, 153, 153);">138</li><li style="color: rgb(153, 153, 153);">139</li><li style="color: rgb(153, 153, 153);">140</li><li style="color: rgb(153, 153, 153);">141</li><li style="color: rgb(153, 153, 153);">142</li><li style="color: rgb(153, 153, 153);">143</li><li style="color: rgb(153, 153, 153);">144</li><li style="color: rgb(153, 153, 153);">145</li><li style="color: rgb(153, 153, 153);">146</li><li style="color: rgb(153, 153, 153);">147</li><li style="color: rgb(153, 153, 153);">148</li><li style="color: rgb(153, 153, 153);">149</li><li style="color: rgb(153, 153, 153);">150</li><li style="color: rgb(153, 153, 153);">151</li><li style="color: rgb(153, 153, 153);">152</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:6,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<ul><li>获取验证码</li></ul> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/974229c05035123093c3d802df353f75.png" alt="image.png"><br><img src="https://i-blog.csdnimg.cn/blog_migrate/46c4f9987db5ca211d2a6be4398e3287.png" alt="image.png"></p> 
<ul><li>登录</li></ul> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/5142608f9103abfacb21f08396046420.png" alt="image.png"></p> 
<pre data-index="7" class="set-code-show prettyprint" style="user-select: auto;"><code class="prism language-arkts has-numbering" onclick="mdcp.copyCode(event)" style="position: unset; user-select: auto;">// 提示用户已经登录过了，需要登出后才能重新登录
// 重而需要调用注销按钮中的登出方法
   cloud.auth().signOut()
<div class="hljs-button {2} add_def" data-title="复制"></div></code><ul class="pre-numbering" style="opacity: 0.808639;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul><button class="btn-code-notes mdeditor" data-report-click="{&quot;spm&quot;:&quot;3001.10436&quot;,&quot;extra&quot;:{&quot;index&quot;:7,&quot;runIdx&quot;:-1}}">代码解读</button></pre> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/f8a63eb65c902b74f7116b92cc8b470a.png" alt="image.png"></p> 
<ul><li>点击注销按钮</li></ul> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/7c5a141692aa78a845833c0b9fe49a2a.png" alt="image.png"></p> 
<ul><li>点击登录后，跳转到Index页面中</li></ul> 
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/972f5321135d0cee326d8ba031efec43.png" alt="image.png"></p>
                